<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<title>Gauge Mobile Sample</title>
		<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad: true"></script>
		<script language="JavaScript" type="text/javascript">
			require(["dojox/mobile", "dojox/mobile/parser", "dojox/mobile/compat", "dojox/mobile/deviceTheme", 
			"dojox/dgauges/components/default/CircularLinearGauge",
			"dojox/dgauges/components/default/SemiCircularLinearGauge",
			"dojox/dgauges/components/default/VerticalLinearGauge",
			"dojox/dgauges/components/default/HorizontalLinearGauge",
			"dojox/dgauges/components/black/CircularLinearGauge",
			"dojox/dgauges/components/black/SemiCircularLinearGauge",
			"dojox/dgauges/components/black/VerticalLinearGauge",
			"dojox/dgauges/components/black/HorizontalLinearGauge",
			"dojox/dgauges/components/green/CircularLinearGauge",
			"dojox/dgauges/components/green/SemiCircularLinearGauge",
			"dojox/dgauges/components/green/VerticalLinearGauge",
			"dojox/dgauges/components/green/HorizontalLinearGauge",
			"dojox/dgauges/components/grey/CircularLinearGauge",
			"dojox/dgauges/components/grey/SemiCircularLinearGauge",
			"dojox/dgauges/components/grey/VerticalLinearGauge",
			"dojox/dgauges/components/grey/HorizontalLinearGauge",
			"dojox/dgauges/components/classic/CircularLinearGauge",
			"dojox/dgauges/components/classic/SemiCircularLinearGauge",
			"dojox/dgauges/components/classic/VerticalLinearGauge",
			"dojox/dgauges/components/classic/HorizontalLinearGauge"]);
		</script>
	</head>
	<body style="-webkit-user-select: none; outline: none; visibility:hidden;">

		<div id="home" data-dojo-type="dojox.mobile.View" selected="true">
			<h1 data-dojo-type="dojox.mobile.Heading">Gauges</h1>
			<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Gauges Themes</h2>
			<ul data-dojo-type="dojox.mobile.RoundRectList">
				<li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem" moveTo="defaultGauges" transition="slide">
					Default 
				</li>
				<li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem" moveTo="classicGauges" transition="slide">
					Classic 
				</li>
				<li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem" moveTo="blackGauges" transition="slide">
					Black
				</li>
				<li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem" moveTo="greyGauges" transition="slide">
					Grey 
				</li>
				<li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem" moveTo="greenGauges" transition="slide">
					Green 
				</li>
			</ul>
		</div>

		<div id="defaultGauges" data-dojo-type="dojox.mobile.View">
			<h1 data-dojo-type="dojox.mobile.Heading" back="Back" moveTo="#home">Default Theme</h1>
			<br/>
			<div data-dojo-type="dojox.dgauges.components.default.CircularLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:200px"></div>
			<br/>
			<div data-dojo-type="dojox.dgauges.components.default.SemiCircularLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:150px;"></div>
			<br/>
			<div data-dojo-type="dojox.dgauges.components.default.HorizontalLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:50px;"></div>
			<br/>
			<div data-dojo-type="dojox.dgauges.components.default.VerticalLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:300px;"></div>
		</div>
		<div id="classicGauges" data-dojo-type="dojox.mobile.View">
			<h1 data-dojo-type="dojox.mobile.Heading" back="Back" moveTo="#home">Classic Theme</h1>
			<br/>
			<div data-dojo-type="dojox.dgauges.components.classic.CircularLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:200px"></div>
			<br/>
			<div data-dojo-type="dojox.dgauges.components.classic.SemiCircularLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:150px;"></div>
			<br/>
			<div data-dojo-type="dojox.dgauges.components.classic.HorizontalLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:50px;"></div>
			<br/>
			<div data-dojo-type="dojox.dgauges.components.classic.VerticalLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:300px;"></div>
		</div>
		<div id="blackGauges" data-dojo-type="dojox.mobile.View">
			<h1 data-dojo-type="dojox.mobile.Heading" back="Back" moveTo="#home">Black Theme</h1>
			<br/>
			<div data-dojo-type="dojox.dgauges.components.black.CircularLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:200px"></div>
			<br/>
			<div data-dojo-type="dojox.dgauges.components.black.SemiCircularLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:150px;"></div>
			<br/>
			<div data-dojo-type="dojox.dgauges.components.black.HorizontalLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:50px;"></div>
			<br/>
			<div data-dojo-type="dojox.dgauges.components.black.VerticalLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:300px;"></div>
		</div>
		<div id="greyGauges" data-dojo-type="dojox.mobile.View">
			<h1 data-dojo-type="dojox.mobile.Heading" back="Back" moveTo="#home">Grey Theme</h1>
			<br/>
			<div data-dojo-type="dojox.dgauges.components.grey.CircularLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:200px"></div>
			<br/>
			<div data-dojo-type="dojox.dgauges.components.grey.SemiCircularLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:150px;"></div>
			<br/>
			<div data-dojo-type="dojox.dgauges.components.grey.HorizontalLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:50px;"></div>
			<br/>
			<div data-dojo-type="dojox.dgauges.components.grey.VerticalLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:300px;"></div>
		</div>
		<div id="greenGauges" data-dojo-type="dojox.mobile.View">
			<h1 data-dojo-type="dojox.mobile.Heading" back="Back" moveTo="#home">Green Theme</h1>
			<br/>
			<div data-dojo-type="dojox.dgauges.components.green.CircularLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:200px"></div>
			<br/>
			<div data-dojo-type="dojox.dgauges.components.green.SemiCircularLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:150px;"></div>
			<br/>
			<div data-dojo-type="dojox.dgauges.components.green.HorizontalLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:50px;"></div>
			<br/>
			<div data-dojo-type="dojox.dgauges.components.green.VerticalLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:300px;"></div>
		</div>			
	</body>
</html>
